/*
 * @ddescription: 修改物流信息
 * @Author: along
 * @Date: 2020-10-28
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-09 17:39:30
 */
<template>
    <div class="changelogistics">
        <el-dialog
            title="修改物流信息"
            :visible.sync="dialogChangeInfo"
            width="614px"
            :close-on-click-modal="false"
        >
            <div
                class="wrapLog"
                v-for="(row,index) in ruleForm"
                :key="index"
                :style="{marginBottom: INDEX == 999 ? '30px' : '0px'}"
            >
                <p
                    class="wrapLog_title"
                    v-show="INDEX == 999 ? true : (INDEX == index ? true : false)"
                >
                    物流信息{{ index | filterIndex }}
                </p>
                <div
                    class="itemLog"
                    v-show="INDEX == 999 ? true : (INDEX == index ? true : false)"
                >
                    <p class="item_title">
                        快递公司
                    </p>
                    <el-autocomplete
                        v-model="row.logistics_name"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请选择选择快递公司"
                        @select="handleSelect($event, row)"
                        @blur="fnClearIpt(index)"
                        size="small"
                        :style="{width: '491px'}"
                    />
                </div>
                <div
                    class="itemLog"
                    v-show="INDEX == 999 ? true : (INDEX == index ? true : false)"
                >
                    <p class="item_title">
                        物流单号
                    </p>
                    <el-input
                        v-model="row.tracking_no"
                        placeholder="请填写物流单号"
                        size="small"
                        clearable
                    />
                </div>
            </div>
            <div
                slot="footer"
                class="dialog-footer"
                :style="{marginTop: '-9px'}"
            >
                <el-button
                    @click="dialogChangeInfo = false"
                    size="medium"
                    type="default"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="submitForm()"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ChangeLogistics',
    data () {
        return {
            dialogChangeInfo: false,
            ruleForm: [{
                logistics_no: '',
                tracking_no: '',
                logistics_name: ''
            }],
            expressRm: [],
            expressAll: [],
            iptResult: [],
            timeout: '',
            address: '',
            INDEX: '',//查看物流标示 999:全部 0:第一个 1:第二个...
        };
    },
    mounted () {
        this.getExpress(1, resp => {
            this.restaurants = resp;
            this.expressRm = resp;
        });
        this.getExpress(0, resp => {
            this.expressAll = resp;
        });
    },
    filters: {
        filterIndex (val) {
            if(val === 0) return '一';
            if(val === 1) return '二';
            if(val === 2) return '三';
            if(val === 3) return '四';
            if(val === 4) return '五';
        }
    },
    methods: {
        /**
         * @description 打开修改物流弹窗
         */
        show (row) {
            this.dialogChangeInfo = true;
            this.order_no = row.order_no;
            this.ruleForm = row.tracking_info_list;
            this.INDEX = row.index;
        },

        /**
         * @description 选择快递公司操作
         */
        fnClearIpt (index) {
            if (this.iptResult.length == 0) {
                this.ruleForm[index]['logistics_no'] = '';
            }
        },
        querySearchAsync(queryString, cb) {
            var restaurants = null;

            if (queryString == '' || queryString == null) {
                restaurants = this.expressRm;
            } else {
                restaurants = this.expressAll;
            }
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            this.iptResult = results;
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 200 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item, row) {
            this.address = item.address;
            this.$set(row, 'logistics_no', item.address);
        },

        /**
         * 获取物流公司信息
         */
        getExpress (no, callback) {
            this.$post('/Logistics/getList', {
                type: no
            }, resp=>{
                if (resp.code == 1) {
                    let list = [];

                    resp.data.list.map((item,index)=>{
                        list.push({
                            value: item.name,
                            address: item.logistics_no
                        });
                    });
                    callback(list);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 物流信息提交
         */
        submitForm () {
            for(let key=0; key<this.ruleForm.length; key++){
                if(this.ruleForm[key].logistics_name == '') {
                    this.$notify({
                        title: '警告',
                        message: '快递公司不可以为空',
                        duration: 2000,
                        type: 'warning'
                    });
                    return false;
                }
                if(this.ruleForm[key].tracking_no == '') {
                    this.$notify({
                        title: '警告',
                        message: '快递单号不可以为空',
                        duration: 2000,
                        type: 'warning'
                    });
                    return false;
                }
            }

            let tracking_info = this.ruleForm.reduce((cur,next) => {
                cur.push({
                    logistics_no: next.logistics_no,
                    tracking_no: next.tracking_no
                });
                return cur;
            },[]);

            this.$post('/ShopGoodsOrder/setTrackingInfo', {
                order_no: this.order_no,
                tracking_info: JSON.stringify(tracking_info)
            }, resp => {
                if (resp.code == 1) {
                    this.$emit('update');
                    this.dialogChangeInfo = !this.dialogChangeInfo;
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.changelogistics {
    display: flex;
    flex-direction: column;
    .wrapLog {
        display: flex;
        flex-direction: column;
        margin-bottom: 30px;
        .wrapLog_title {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            font-weight: 500;
        }
        .itemLog {
            display: flex;
            height: 32px;
            align-items: center;
            margin-top: 16px;
            .item_title {
                color: #555;
                font-size: 14px;
                white-space: nowrap;
                margin-right: 10px;
            }
        }
    }
    .wrapLog:last-child {
        margin-bottom: 0;
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
        margin-top: 24px;
    }
}
</style>
<style lang="less">
.changelogistics {
    .el-dialog__body {
        max-height: 400px;
        overflow: hidden;
        overflow-y: auto;
    }
}
</style>